<template>
  <view class="page">
    <!-- 常见问题 start -->
    <view class="bg-white">
      <view class="text-xl text-bold text-black fu-help-title">常见问题</view>
      <view class=" fu-list" @click="goHelpDetail(item.id)" v-for="(item,index) in normalList" :key="item.id">
        <view class="fu-item "  :class="[index == normalList.length -1?'':'solid-bottom']">
          <text class="text-lg">{{item.title}}</text>
          <text class="fu-iconfont fu-text-24 text-gray"> &#xe82d; </text>
        </view>
      </view>

     <!-- <view class="fu-list" @click="goHelpDetail(1)">
        <view class="fu-item solid-bottom ">
          <text class="text-lg">购物流程</text>
          <text class="fu-iconfont fu-text-24 text-gray"> &#xe82d; </text>
        </view>
      </view>

      <view class="fu-list" @click="goHelpDetail(1)">
        <view class="fu-item solid-bottom ">
          <text class="text-lg">注册流程</text>
          <text class="fu-iconfont fu-text-24 text-gray"> &#xe82d; </text>
        </view>
      </view> -->
    </view>
    <!-- 常见问题 end -->

    <!-- 块之间的距离 -->
    <view class="fu-crowd-area"></view>

    <!-- 交易问题 start -->
    <view class="bg-white">
      <view class="text-xl text-bold text-black fu-help-title">交易问题</view>
      <view class="fu-list" @click="goHelpDetail(item.id)" v-for="(item,index) in transactionList" :key="item.id">
        <view class="fu-item " :class="[index == transactionList.length -1?'':'solid-bottom']">
          <text class="text-lg">{{item.title}}</text>
          <text class="fu-iconfont fu-text-24 text-gray"> &#xe82d; </text>
        </view>
      </view>

    <!--  <view class="fu-list" @click="goHelpDetail(1)">
        <view class="fu-item solid-bottom ">
          <text class="text-lg">退款</text>
          <text class="fu-iconfont fu-text-24 text-gray"> &#xe82d; </text>
        </view>
      </view>

      <view class=" fu-list" @click="goHelpDetail(1)">
        <view class="fu-item solid-bottom">
          <text class="text-lg">退款</text>
          <text class="fu-iconfont fu-text-24 text-gray"> &#xe82d; </text>
        </view>
      </view> -->
    </view>
    <!-- 交易问题 end -->

    <!-- 块之间的距离 -->
    <view class="fu-crowd-area"></view>

    <!-- 图片区域 start -->
    <view class="bg-white fu-labour">
      <view class="margin-top-lg fu-labour-item" @click="callMobile(phone)">
        <image class="fu-labour-bg" src="../../static/phone.png" mode="aspectFit" />
        <view class="fu-labour-text">
          <text class="text-white text-lg">电话服务</text>
          <text class="text-white text-sm">{{ phone }}</text>
        </view>
      </view>
      <view class="margin-top-lg margin-left-sm fu-labour-item" @click="onChat()" v-if="is_hidden!='1'">
        <image class="fu-labour-bg" src="../../static/msg.png" mode="aspectFit" />
        <view class="fu-labour-text">
          <text class="text-white text-lg">在线客服</text>
          <text class="text-white text-sm">{{ online }}</text>
        </view>
      </view>
    </view>
    <!-- 图片区域 end -->
  </view>
</template>

<script>
/**
 * @author 刘畅
 */
export default {
  name:'Help',
  data() {
    return {
      phone: '400-123-1234',    // {String} 电话服务
      online:'400-123-1234',//在线客服
      time: '9:00-18:00',       // {String} 在线客服
      normalList:[],//常见问题
      transactionList:[],//交易问题
	  is_hidden: 0
    }
  },
  onLoad() {
    this.get_column_article_list(45);
    this.get_column_article_list(46);
	this.getConfig();
  },
  onShow() {},
  methods: {
	  getConfig(){
		  this.$api.post(global.apiUrls.postGetConfig,{
			  code:'operation'
		  }).then(res=>{
			  console.log('getconfig', res);
		    if(res.data.code == 1){
				this.is_hidden = res.data.data.is_hidden;
		      this.phone = res.data.data.contact_platform;
		      this.online = res.data.data.customer_service_business_time;
		    }
		  }).catch(err=>{
		    console.log(err);
		  })
	  },
    /**
     * @event
     * @description 去帮助详情页面
     * @param {Numebr} type - 去往那个问题的详情
     */
    goHelpDetail(type) {
      this.$urouter.navigateTo({
        url: '/pages/index/help/help-detail/index',
        params: { "id": type }
      })
    },
    /**
     * @author dengdongfang
     * @date 2021-5-24
     * @description 获取帮助中心内容列表，后台说的，调用这个接口传死的id,45常见问题，46交易问题，后台不能删除，所以id是固定的
     */
    get_column_article_list(id){
      this.$api.post(global.apiUrls.get_column_article_list,{
        category_id:id,
        is_recommend:0,
        type:2
      }).then(res=>{
        console.log(res);
        if(res.data.code == 1){
          if(id == 45){
            this.normalList = res.data.data.data;
          }
          if(id == 46){
            this.transactionList = res.data.data.data;
          }
        }

      }).catch(err=>{
        console.log(err);
      })
    },
    callMobile(val){
      if(val){
        uni.makePhoneCall({
          phoneNumber:val,
        })
      }
    },
	onChat() {
		this.$util.actionAuth(() => {
			this.$urouter.navigateTo({
				url: '/pages/service-message/service/service-detail/index',
				params: {
					partner_id: 0,
					id: 4,
					name: '客服'
				}
			});
		});
	}
  }
}
</script>

<style lang="scss" scoped>
.page{
  width: 100%;
  height: calc(100vh - 88rpx);
  background-color: #fff;
}

.fu-crowd-area {
  width: 100%;
  height: 20rpx;
  background-color: #F6F7F9;
}

// 帮助列表 start
.fu-help-title {
  position: relative;
  line-height: 110rpx;
  padding-left: 52rpx;
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 32rpx;
    width: 6rpx;
    height: 28rpx;
    background-color:$bgtheme;
    border-radius: 4rpx;
  }
}
.fu-list{
  height: 110rpx;
  padding-left: 32rpx;
  padding-right: 32rpx;
  .fu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 110rpx;
    .fu-text-24 {
      font-size: 24rpx !important;
    }
  }
}
// 帮助列表 end

// 人工客服 start
.fu-labour {
  display: flex;
  padding-left: 32rpx;
  padding-right: 32rpx;
  .fu-labour-item {
    position: relative;
    width: 334rpx;
    height: 152rpx;
    .fu-labour-bg {
      width: 334rpx;
      height: 152rpx;
    }
    .fu-labour-text {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 40rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 92rpx;
    }
  }
}
// 人工客服 end
</style>
